<template>
  <div class="app-container">
    <h2 style="text-align: center;">填写课程章节</h2>

    <el-steps :active="active" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>

    <el-button type="text" @click="openChapterDialog()">添加章节</el-button>

    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节" v-loading="loading">
      <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
          <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveChapter">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
      <el-form :model="video" label-width="120px" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中">
        <el-form-item label="课时标题">
          <el-input v-model="video.title"/>
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.free">
            <el-radio :label="true">免费</el-radio>
            <el-radio :label="false">默认</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :on-progress="handlePreview"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="file"
            :action="BASE_API+'/service-vod/DongBing/vod/upload'"
            :limit="1"
            class="upload-demo">
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">最大支持1G，<br>
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
              <i class="el-icon-question"/>
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
        <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveVideo">确 定</el-button>
      </div>
    </el-dialog>

    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            添加小节
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => update(data)">
            修改信息
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除本行
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-form label-width="120px" style="margin-top: 20px">
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="Previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getChapterAndVideo,deleteChapter,updateChapter,insertChapter,deleteVod } from '@/api/Chapter';
import { insert,update,deleteVideo } from '@/api/Video';

export default {
  name: "CourseChapter",
  data(){
    return{
      fullscreenLoading: false,
      dialogVideoFormVisible: false,
      saveVideoBtnDisabled: false,
      loading:false,
      dialogChapterFormVisible: false,
      video: {
        courseId: '',
        chapterId: '',
        title: '',
        sort: 0,
        free: 0,
        videoSourceId: '',
        videoOriginalName:''
      },
      chapter:{
        id:'',
        courseId:'',
        title: '',
        sort: 0
      },
      data: [],
      BASE_API: process.env.BASE_API,
      file:[],
      CourseId: '',
      active: 2,
      saveBtnDisabled: false,
      defaultProps: ''
    }
  },
  methods:{
    handleVodUploadSuccess(response, file, fileList) {
      this.fullscreenLoading = false
      this.$notify({
        title: '操作成功',
        type: 'success',
        message: response.message
      })
      this.video.videoSourceId = response.data
      this.video.videoOriginalName = '我是嫩爹'
    },
    handlePreview() {
      this.fullscreenLoading = true
    },
    handleVodRemove(){
        deleteVod(this.video.videoSourceId).then(res=> {
          this.$notify({
            title: '操作成功',
            type: 'success',
            message: res.message
          })
        })
    },
    beforeVodRemove(file){
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleUploadExceed(){
      this.$message.warning('想要重新上传视频，请先删除已上传的视频')
    },
    saveVideo(){
      this.video.courseId = this.CourseId
      insert(this.video).then(res=>{
        this.$notify({
          title: '操作成功',
          type: 'success',
          message: res.message
        })
        this.dialogVideoFormVisible = false
        this.getChapterAndVideo()
        this.video.videoSourceId = ''
      })
    },
    update(row){
      this.dialogChapterFormVisible = true
      this.chapter.id = row.id
      this.chapter.title = row.label
    },
    remove(node,row){
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteChapter(row.id).then(res=>{
          this.$notify({
            title: '操作成功',
            type: 'success',
            message: res.message
          })
          this.getChapterAndVideo()
        })
      })
    },
    append(row){
      this.video = {}
      this.video.chapterId = row.id
      this.dialogVideoFormVisible = true
    },
    saveChapter(){
      this.loading = true
      console.log(this.chapter.id)
      if (this.chapter.id===null||this.chapter.id==='') {
        this.insert()
      }else {
        this.updatePlus()
      }
    },
    updatePlus(){
      updateChapter(this.chapter).then(res=>{
        this.$notify({
          title: '操作成功',
          message: res.message,
          type: 'success'
        });
        this.dialogChapterFormVisible = false
        this.getChapterAndVideo()
        this.loading = false
      })
    },
    insert(){
      insertChapter(this.chapter).then(res=>{
        this.$notify({
          title: '操作成功',
          message: res.message,
          type: 'success'
        });
        this.dialogChapterFormVisible = false
        this.getChapterAndVideo()
        this.loading = false
      })
    },
    openChapterDialog(){
      this.dialogChapterFormVisible = true
      this.chapter.title = ''
      this.chapter.sort = 0
    },
    Previous(){
      this.$router.push({path:'/course/info/'+this.CourseId})
    },
    handleNodeClick(){

    },
    getChapterAndVideo(){
      this.loading = true
      getChapterAndVideo(this.CourseId).then(res=>{
        this.data = res.data
        this.loading = false
      })
    },
    saveOrUpdate(){
      this.$router.push({path:'/course/publish/'+this.CourseId})
    },
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.CourseId = this.$route.params.id
      this.chapter.courseId = this.CourseId
      this.getChapterAndVideo()
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
